<template>
	<view class="container">
		<view class="generality">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">基础信息</div>
      </view>
      <view class="boxshow">
				<view class="generality_list">
					<view @click="toPage(1)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather1.png" alt="">
							<view>基本信息</view>
						</uni-badge>
					</view>
					<view @click="toPage(2)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather2.png" alt="">
							<view>三个责任人</view>
						</uni-badge>
					</view>
					<view @click="toPage(3)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather3.png" alt="">
							<view>水库巡检</view>
						</uni-badge>
					</view>
					<view @click="toPage(17)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather17.png" alt="">
							<view>预期列表</view>
						</uni-badge>
					</view>
				</view>
			</view>
		</view>
		<view class="generality">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">实时监测</div>
      </view>
      <view class="boxshow">
				<view class="generality_list">
					<view @click="toPage(4)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather4.png" alt="">
							<view>水情信息</view>
						</uni-badge>
					</view>
					<view @click="toPage(5)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather5.png" alt="">
							<view>雨情信息</view>
						</uni-badge>
					</view>
					<view @click="toPage(6)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather6.png" alt="">
							<view>渗压监测</view>
						</uni-badge>
					</view>
					<view @click="toPage(7)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather7.png" alt="">
							<view>告警查看</view>
						</uni-badge>
					</view>
					<view @click="toPage(8)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather8.png" alt="">
							<view>天气预报</view>
						</uni-badge>
					</view>
					<view @click="toPage(9)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather9.png" alt="">
							<view>雷达图</view>
						</uni-badge>
					</view>
					<view @click="toPage(16)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather16.png" alt="">
							<view>设备台账</view>
						</uni-badge>
					</view>
				</view>
			</view>
		</view>
		<view class="generality">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">视频监控</div>
      </view>
      <view class="boxshow">
				<view class="generality_list">
					<view @click="toPage(10)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather10.png" alt="">
							<view>管理所</view>
						</uni-badge>
					</view>
					<view @click="toPage(11)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather11.png" alt="">
							<view>溢洪闸</view>
						</uni-badge>
					</view>
					<view @click="toPage(12)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather12.png" alt="">
							<view>大坝</view>
						</uni-badge>
					</view>
					<view @click="toPage(13)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather13.png" alt="">
							<view>桥头堡</view>
						</uni-badge>
					</view>
					<view @click="toPage(14)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather14.png" alt="">
							<view>环库</view>
						</uni-badge>
					</view>
				</view>
			</view>
		</view>
		<view class="generality">
      <view class="topTitle">
        <div class="topTitle_left"></div>
        <div class="topTitle_right">通讯录</div>
      </view>
      <view class="boxshow">
				<view class="generality_list">
					<view @click="toPage(15)" class="headbadge">
						<uni-badge class="unibadge" :text="dangerValue" absolute="rightTop" size="small">
							<image src="/static/images/gather/img_gather15.png" alt="">
							<view>通讯录</view>
						</uni-badge>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dangerValue: 0,
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转
			toPage(index) {
				switch (index) {
					case 1:
						uni.navigateTo({ url: '/pagesA/baseinfo/index' })
						break;
					case 2:
						uni.navigateTo({ url: '/pagesA/liable/index' })
						break;
					case 3:
						uni.navigateTo({ url: '/pagesA/patrol/index' })
						break;
					case 4:
						uni.navigateTo({ url: '/pagesA/water/index' })
						break;
					case 5:
						uni.navigateTo({ url: '/pagesA/rain/index' })
						break;
					case 6:
						uni.navigateTo({ url: '/pagesA/osmotic/index' })
						break;
					case 7:
						uni.navigateTo({ url: '/pagesA/alarm/index' })
						break;
					case 8:
						uni.navigateTo({ url: '/pagesA/weather/index' })
						break;
					case 9:
						uni.navigateTo({ url: '/pagesA/radar/index' })
						break;
					case 10:
						uni.navigateTo({ url: '/pagesA/camera/index?name=管理所' })
						break;
					case 11:
						uni.navigateTo({ url: '/pagesA/camera/index?name=溢洪闸' })
						break;
					case 12:
						uni.navigateTo({ url: '/pagesA/camera/index?name=大坝' })
						break;
					case 13:
						uni.navigateTo({ url: '/pagesA/camera/index?name=桥头堡' })
						break;
					case 14:
						uni.navigateTo({ url: '/pagesA/camera/index?name=环库' })
						break;
					case 15:
						uni.navigateTo({ url: '/pagesA/dutylist/index' })
						break;
					case 16:
						uni.navigateTo({ url: '/pagesA/device/index' })
						break;
					case 17:
						uni.navigateTo({ url: '/pagesA/overdue/index' })
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 25rpx;
	}

	.generality {
		margin-bottom: 20rpx;

		&:first-child {
			padding-top: 20rpx;
		}
		&:last-child {
			padding-bottom: 50rpx;
		}

		.generality_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.headbadge {
				width: 25%;
				text-align: center;
				margin-top: 35rpx;

				&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
					margin-top: 0;
				}

				.unibadge {
					image {
						width: 84rpx;
						height: 84rpx;
					}

					view {
						font-size: 26rpx;
						line-height: 26srpx;
						padding-top: 6rpx;
					}
				}
			}
		}
	}

	.topTitle {
    display: flex;
    align-items: center;

    .topTitle_left {
      width: 8rpx;
      height: 28rpx;
      background: #0D91FF;
    }

    .topTitle_right {
      font-size: 32rpx;
      font-weight: bold;
      color: #0D91FF;
      margin-left: 13rpx;
    }
  }
 
  .boxshow {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .1);
		margin-top: 12rpx;
		padding: 12rpx 0 15rpx;
  }
</style>
